<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>

<body>
    <form action="">
        <div class="head">
            <a href="main.html">
                <img src="image/登录/1.png" alt="">
            </a>
        </div>
        <div class="reg">华为账号注册</div>
        <div class="login-1">已有账号，</div>
        <div class="login-2"><a href="login.html" style="height: 30px;" id="gotologin"> 去登录 &gt;</a></div>
        <div class="main">
            <table>
                <tr>
                    <td colspan="3">
                        <div class="input-name">
                            <div class="area">国家/地区</div>
                            <select name="" id="" class="select">
                                <option value="中国">新兴</option>
                                <option value="广州">广州</option>
                                <option value="上海">上海</option>
                                <option value="北京">北京</option>
                            </select>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <div class="input-name">
                            <!-- <input type="text" name="user" title="Search" class="name account" id="name"
                                value="请输入手机号 / 邮件地址" onkeydown="if (event.keyCode==20) {}"
                                onblur="if(this.value=='')value='请输入手机号 / 邮件地址';"
                                onfocus="if(this.value=='请输入手机号 / 邮件地址')value='';" value="请输入手机号 / 邮件地址" /> -->
                            <input type="text" placeholder="请输入手机号 / 邮件地址" name="user" title="Search"
                                class="name account" id="name" value="" onkeydown="if (event.keyCode==20) {}"
                                onblur="if(this.placeholder=='')placeholder='请输入手机号 / 邮件地址';"
                                onfocus="if(this.placeholder=='请输入手机号 / 邮件地址')placeholder='';"
                                placeholder="请输入手机号 / 邮件地址" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <div class="input-name">
                            <input type="password" placeholder="密码" name="password" title="Search"
                                class="name password-1" id="name" value="" onkeydown="if (event.keyCode==20) {}"
                                onblur="if(this.placeholder=='')placeholder='密码';"
                                onfocus="if(this.placeholder=='密码')placeholder='';" placeholder="密码" />
                            <!-- <i class="fa fa-eye-slash fa-2x i2" aria-hidden="true"></i> -->
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <div class="input-name">
                            <input type="password" placeholder="确认密码" name="password" title="Search"
                                class="name password-2" id="name" value="" onkeydown="if (event.keyCode==20) {}"
                                onblur="if(this.placeholder=='')placeholder='确认密码';"
                                onfocus="if(this.placeholder=='确认密码')placeholder='';" placeholder="确认密码" />
                            <!-- <i class="fa fa-eye-slash fa-2x i2" aria-hidden="true"></i> -->
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" class="reg-button"><button onclick="reg();">注 册</button></td>
                </tr>
            </table>
        </div>
        <div class="foot">
            <div>
                <br><br>华为帐号用户协议&nbsp;&nbsp; | &nbsp;&nbsp;关于华为帐号与隐私的声明&nbsp;&nbsp; | &nbsp;&nbsp;常见问题&nbsp;&nbsp; |
                &nbsp;&nbsp;Cookies
            </div>
            <div>
                华为帐号 版权所有 © 2011-2021
            </div>
        </div>
    </form>
</body>

</html>

<style>
    .main {
        position: absolute;
        left: 538px;
        top: 180px;
        width: 500px;
        height: 500px;
        /* border: 1px solid rebeccapurple; */
        text-align: center;
        line-height: 400px;

        text-align: center;
        font-size: 10px;
        color: #ccc;

    }

    .main>table {
        /* background-color: rebeccapurple; */
        text-align: center;
        line-height: 50px;
        position: absolute;
        top: 50px;
        left: 50px;
        height: 100px;
        margin-top: 0;
        padding-top: 0;
    }

    .reg {
        position: absolute;
        left: 584px;
        top: 125px;
        width: 400px;
        height: 40px;
        line-height: 40px;
        /* border: 1px solid rebeccapurple; */
        text-align: center;
        font-size: 30px;
    }

    .login-1 {
        position: absolute;
        left: 700px;
        top: 174px;
        width: 100px;
        height: 30px;
        line-height: 30px;
        /* border: 1px solid rebeccapurple; */
        text-align: center;
        font-size: 18px;
    }

    .login-2 {
        position: absolute;
        left: 790px;
        top: 173px;
        width: 80px;
        height: 30px;
        line-height: 30px;
        /* border: 1px solid rebeccapurple; */
        text-align: center;
        font-size: 18px;
    }

    .login-2 a {
        text-decoration: none;
        color: #007DFF;
    }

    /* .login-2 a:hover {
        cursor: progress;
    } */


    .input-name {
        width: 410px;
        height: 50px;
        border-radius: 10px;
        margin-top: 24px;
        background-color: #eeeeee;
        border: 1px solid #eeeeee;
        /* position: absolute; */
    }

    .input-name:hover {
        border: 1px solid #007DFF;
    }

    .select {
        position: absolute;
        right: 14px;
        top: 30px;
        height: 45px;
        border-style: none;
        outline-style: none;
        font-size: 15px;
        font-family: Arial, Helvetica, sans-serif;
        color: #727272;
        width: 80px;
        background-color: #eeeeee;
    }

    /* option {
        outline-style: solid;
        outline-color: blue;
        border: blue 1px solid;
    } */

    .name {
        height: 45px;
        border-style: none;
        outline-style: none;
        font-size: 15px;
        font-family: Arial, Helvetica, sans-serif;
        color: #727272;
        width: 357px;
        background-color: #eeeeee;
    }

    .spac {
        width: 355px;
    }

    .reg-button button {
        width: 300px;
        height: 50px;
        border-radius: 10px;
        margin-top: 60px;
        border-style: none;
        background-color: #007DFF;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bolder;
        color: #fff;
        font-size: 18px;
    }

    .reg-button button:hover {
        cursor: pointer;
    }

    .foot {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 1596px;
        height: 110px;
        background-color: #0000000D;
    }

    .foot div:nth-child(1) {
        font-size: 15px;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        color: #383838;
    }

    .foot div:nth-child(2) {
        text-align: center;
        margin-top: 10px;
        font-size: 13px;
        font-family: Arial, Helvetica, sans-serif;
        color: #a3a3a3;
    }

    .head {
        position: absolute;
        top: 0;
        left: 0;
        width: 1596px;
        height: 50px;
        background-color: #0000000D;
    }

    .head img {
        position: absolute;
        left: 190px;
        top: 5px;
        width: 220px;
        height: 40px;
    }

    .area {
        position: absolute;
        font-size: 16px;
        color: #838383;
        left: 30px;
        top: 38px;
        width: 70px;
        height: 30px;
        line-height: 30px;
        /* border: 1px solid rebeccapurple; */
    }
</style>

<script src="js.js"></script>